<style>
    .news-left {
        width: 300px;
        float: left;
        margin-right: 15px;
    }

    .news-right {
        overflow: hidden;
        width: 980px;
        position: relative;
        display: inline-block;
    }

    .news-left .news-item {
        height: 150px;
        cursor: pointer;
        max-width: 270px;
        overflow: hidden;
        position: relative;
        border: 1px solid #ccc;
        background-size: cover;
        background-position: center center
    }

    .news-left .news-item.active {
        border: 3px solid #44b549 !important
    }

    .news-left .article-add {
        color: #999;
        display: block;
        font-size: 22px;
        text-align: center
    }

    .news-left .article-add:hover {
        color: #666
    }

    .news-left .news-title {
        bottom: 0;
        color: #fff;
        width: 272px;
        display: block;
        padding: 0 5px;
        max-height: 6em;
        overflow: hidden;
        margin-left: -1px;
        position: absolute;
        text-overflow: ellipsis;
        background: rgba(0, 0, 0, .7)
    }

    .news-left .news-item a {
        color: #fff;
        width: 30px;
        height: 30px;
        float: right;
        font-size: 12px;
        margin-top: -1px;
        line-height: 34px;
        text-align: center;
        margin-right: -1px;
        background-color: rgba(0, 0, 0, .5)
    }

    .news-left .news-item:hover a {
        display: inline-block !important
    }

    .news-left .news-item a:hover {
        text-decoration: none;
        background-color: #0C0C0C
    }

    .news-right .upload-image-box {
        width: 130px;
        height: 90px;
        border: 1px solid rgba(125, 125, 125, .1);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    .color-green {
        color: #090 !important;
    }
    .color-desc {
        color: #999 !important;
    }
    .help-block {
        color: #999;
        font-size: 12px;
    }
    .color-blue {
        color: #2494f2 !important;
    }
</style>
<div id="NewsEditor" class="layui-clear nowrap padding-bottom-30">
    <div class="layui-card news-left">
        <div :class="[ isHide ?'layui-card-body layui-hide':'layui-card-body']">
            <div v-if="list.length > 0">
            <div v-for="(item,i) in list">
                <div :class="[ item.active ?'news-item transition active':'news-item transition']" @click="setItem(i,$event)" :style="item.style">
                    <a @click="delItem(i, $event)" class="transition layui-icon layui-hide">&#x1006;</a>
                    <a @click="dnItem(i, $event)" class="transition layui-icon layui-hide">&#xe61a;</a>
                    <a @click="upItem(i, $event)" class="transition layui-icon layui-hide">&#xe619;</a>
                    <span class="news-title">{{item.title}}</span>
                </div>
                <hr>
            </div>
            </div>
            <div v-if="list.length < 1">
            <div class="news-item transition active">
                <a @click="delItem($index, $event)" class="transition layui-icon layui-hide">&#x1006;</a>
                <a @click="dnItem($index, $event)" class="transition layui-icon layui-hide">&#xe61a;</a>
                <a @click="upItem($index, $event)" class="transition layui-icon layui-hide">&#xe619;</a>
                <span class="news-title"></span>
                <hr>
            </div>
            </div>
            <a class='article-add transition' @click="addItem()" data-text-tip="添加图文"><i class="fa fa-plus"></i></a>
        </div>
    </div>
    <div class="layui-card news-right">
        <div class="layui-card-body">
            <form class="layui-form padding-20" role="form" name="news">
                <label class="layui-form-item relative block">
                    <span class="color-green">文章标题</span>
                    <input maxlength="64" v-model="item.title" lay-verify="required" placeholder="请在这里输入标题" name='title' class="layui-input">
                </label>
                <label class="layui-form-item relative block">
                    <span class="color-green">文章作者</span>
                    <input maxlength="64" v-model="item.author" lay-verify="required" placeholder="请输入文章作者" name='author' class="layui-input">
                </label>


                <div class="layui-form-item">
                    <label class="layui-form-item color-green">图文封面大图片</label>
                    <div class="layui-input-block layuimini-upload">
                        <input name="local_url" v-model="item.local_url" class="layui-input layui-col-xs6"   placeholder="请上传图片" value="">
                        <div class="layuimini-upload-btn">
                            <span><a class="layui-btn" data-upload="local_url" data-upload-number="one" data-upload-exts="png|jpg|ico|jpeg" data-upload-icon="image"><i class="fa fa-upload"></i> 上传</a></span>
                            <span><a class="layui-btn layui-btn-normal" id="select_local_url" data-upload-select="local_url" data-upload-number="one" data-upload-mimetype="image/*"><i class="fa fa-list"></i> 选择</a></span>
                        </div>
                    </div>

                    <div class="layui-input-block">
                        <input type="checkbox" v-model="item.show_cover_pic" lay-filter="show_cover_pic" name="show_cover_pic" title="在正文顶部显示此图片">
                    </div>
                    <p class="color-desc">封面大图片建议尺寸 900像素 * 500像素</p>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-item color-green">图文文章内容</label>
                    <div class="layui-input-block">
                        <textarea v-model="item.content" name="content" rows="20" class="layui-textarea editor" placeholder="请输入图文文章内容"></textarea>
                    </div>
                </div>
                <label class="layui-form-item relative block">
                    <span class="help-block">摘要选填，如果不填写会默认抓取正文前54个字</span>
                    <textarea v-model="item.digest" name="digest" class="layui-textarea" style="height:80px;line-height:18px"></textarea>
                </label>
                <label class="layui-form-item relative block">
                    <span class="help-block">原文链接 <span class="color-blue">选填</span>，填写之后在图文左下方会出现此链接</span>
                    <input pattern="^(http:\/\/|^https:\/\/|^\/\/)((\w|=|\?|\.|\/|&|-)+)" placeholder="请输入跳转链接地址" v-model="item.content_source_url" maxlength="200" name='content_source_url' class="layui-input">
                </label>
                <div class="layui-form-item text-center padding-top-30">
                    <button type="button" class="layui-btn" data-refresh="true" lay-submit>保存图文</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    var editUrl ='{:request()->url()}';
</script>